Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Step 1 — Switch from React to Preact #2

Open
wants to merge 1 commit into
base: 00-react
Choose a base branch
from
Open

Conversation

sampi
Copy link
Owner

@sampi sampi commented Apr 22, 2018

It's time to get hacking!

The main idea here is that we alias react* modules with their preact* equivalents and pull in preact-compat to make sure the API stays the same. This is done both for Node and webpack.

For testing, it's a bit trickier, we pull in preact-render-to-json and put it on the global scope to be available in all tests.
Due to babel-preset-react, we need to remove __self and __source from the output JSON to be able to reliably use snapshot testing in jest.

File sizes:

File name Before gzip After gzip
build/static/js/main.d722544c.js 38.22 kB 13.12 kB

Source Map Analyzer output:
screen shot 2018-04-22 at 13 06 35

@@ -3,19 +3,24 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.3.2",
"react-dom": "^16.3.2",
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Getting rid of react and react-dom

"react": "^16.3.2",
"react-dom": "^16.3.2",
"preact": "^8.2.7",
"preact-compat": "^3.18.0",
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And replace it with preact and preact-compat

// Hack the webpack config to load Preact instead of React
module.exports = webpackConfig =>
(webpackConfig.resolve.alias = Object.assign({}, webpackConfig.resolve.alias, {
react: 'preact-compat',
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

whenever webpack is loading react, it will grab preact-compat instead

// Map React's testing classes to Preact
const newJestConfig = function() {
const config = jestConfig.apply(this, arguments);
config.moduleNameMapper = Object.assign({}, config.moduleNameMapper, {
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

whenever jest tries to load or mock any react* modules, it will get the preact* equivalents.

};

// HACK ALERT!
module.constructor._cache[
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

HACK ALERT!

Preload Node's module cache with the hacked jest config we just made.

@@ -2,6 +2,13 @@ import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

// This is just a Thing
class Thing extends Component {
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a Thing to show off shallow/deep rendering during testing.

* Remove __self and __source from the list of attributes/properties.
* babel-preset-react adds these for use with the React DevTools
*/
function removeDevAttributes(vnode) {
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

babel-preset-react adds __self and __source as props to every Component.

We need this small patch to make them go away and have reliable snapshot testing.

See preactjs/preact-render-to-string#43 (comment) for more info.

@sampi sampi changed the title Step 1 - Switch from React to Preact Step 1 — Switch from React to Preact Apr 22, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant